<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点遍历的效果</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
 
<script type="text/javascript">
     $(function(){
	
			 
			 //text()呈现文本值
		 /*  $("div").click(function () {
            alert($(this).next().text());//next方法没有参数时:用于获取节点之后的第一个同辈元素
            });*/
 
            //与上面是一样的效果
        /*    $("div").click(function () {
            alert($(this).next("div").text()); //next方法有参数时:用于获取节点之后的第一个同辈元素
            });*/
 
          /*  $("div").click(function () {
            alert($(this).nextAll().text());//nextAll方法返回的点击的div所有同辈元素
            });*/
 
            /*$("div").click(function () {
            alert($(this).nextAll("div").text()); //nextAll方法返回的点击的div所有同辈元素是div的
            });*/
 
            //把所点击的层的后面的所有的div都变成红色背景，遍历div
       /*     $("div").click(function () {
            $.each($(this).nextAll("div"), function () {
            $(this).css("background", "red");
            });
            });*/
 
            //不用这么麻烦，会自动隐式迭代，用下面的方法来简化上面的操作
        /*   $("div").click(function () {
            $(this).nextAll("div").css("background", "red");
            });*/
 
            //点击的层背景会是红色，和此层同辈的层都变兰色背景
           $("div").click(function () {
                $(this).css("background", "red");
                $(this).siblings("div").css("background","blue");
            });
			
			/*$("div").click(function(){
			 //siblings在前后位置的div都可以获得得到
			 //this:指代是被点击的那个div
			 $(this).css("background","red").siblings("div").css("background","blue");//迭代的思想来实现  链式编程
			 })*/

		 })
</script>
</head>

<body>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
<p>p1</p>
<p>p2</p>
<div>ee</div>
<div>ff</div>
<div>gg</div>
<div>hh</div>
</body>
</html>
